<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{$title}</title>
    <meta name="author" content="DeathGhost" />
    <link rel="stylesheet" type="text/css" href="/styles/login.min.css"/>
</head>
<body>
<dl class="admin_login">
    <dt>
        <strong>{$logoTitle}</strong>
        <em>Mall Management System</em>
    </dt>
    <dd id="message"></dd>
    <dd class="user_icon">
        <input type="text" placeholder="账号" class="login_txtbx" id="username"/>
    </dd>
    <dd class="pwd_icon">
        <input type="password" placeholder="密码" class="login_txtbx" id="password"/>
    </dd>
    <dd class="val_icon">
        <div class="checkcode">
            <input type="text" id="verify" placeholder="验证码" maxlength="4" class="login_txtbx">
            <img class="code-img" src="{$verifyImageUrl}?{$.now}">
        </div>
        <input type="button" value="刷新验证码" class="ver_btn" id="changeCode">
    </dd>
    <dd>
        <input type="button" value="立即登陆" class="submit_btn"/>
    </dd>
</dl>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/particleGround.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //粒子背景特效
        $('body').particleground({
            dotColor: '#5cbdaa',
            lineColor: '#5cbdaa'
        });
        // 点击更换验证码
        $('#changeCode').click(function () {
            var timestamp = Date.parse(new Date());
            var url = '{$verifyImageUrl}?';
            $('.code-img').attr('src', url+timestamp);
        });
        // 提交登陆表单
        $('.submit_btn').click(function () {
            $('#message').slideUp();
            $.ajax({
                type: 'post',
                url:  '{$action}',
                data: {
                    email : $('#username').val(),
                    password : $('#password').val(),
                    verify : $('#verify').val()
                },
                dataType:'json',
                success: function(result){
                    if(result.success){
                        $('#message').text('登陆成功！');
                        $('#message').slideDown();
                        setTimeout(function () {
                            location.href = '{$successPage}';
                        },500);
                    } else {
                        $('#message').text(result.message);
                        $('#message').slideDown();
                        $('#changeCode').click();
                    }
                },
                error: function(){
                    $('#message').text('服务器出现异常,请重新尝试或与管理员联系！');
                    $('#message').slideDown();
                    $('#changeCode').click();
                }
            });
        });
    });
</script>
</body>
</html>